<template>
    <z-paging>
        <view class="heqader_box">
            <hedsty :headCentext="'钱包'"></hedsty>
        </view>


        <template v-if="userInfo.grow_value > 0">
            <view class="qiaqnao_box"
                style="background-image: url('https://morgan.dingxians.cn/static/userpic/12.png');">
                <view class="yuebox">{{ userInfo.balance || '0.00' }}</view>
                <view class="chakanxingqiang_box" @click.stop="$router('/userPage/bill/bill')">查看详情</view>
            </view>
            <view class="yansuchongzhi_box">元素充值</view>
            <view class="chongliest_box">
                <view class="dange_box"
                    :style="{ backgroundImage: 'url(' + (balanceId == item.id ? 'https://morgan.dingxians.cn/static/balance/1.png' : '') + ')' }"
                    @click="selBan(item)" v-for="(item, index) in banlanceList" :key="index">
                    <view class="top_box">
                        <view class="le_box">
                            <image src="https://morgan.dingxians.cn/static/balance/3.png" mode="scaleToFill" />
                        </view>
                        <view class="shuzi_box">{{ item.num }}</view>
                    </view>
                    <view class="bot_box">{{ item.amount }}.00元</view>
                </view>
            </view>

            <view class="yansuchongzhi_box">充值方式</view>
            <view class="czfs_box">
                <view class="dange_czsd_box"
                    :style="{ backgroundImage: 'url(' + (zfType == item.id ? 'https://morgan.dingxians.cn/static/balance/2.png' : '') + ')' }"
                    @click="zfBtn(item)" v-for="(item, index) in czfsList" :key="index">
                    <image :src="item.img" mode="widthFix" />
                    {{ item.text }}
                </view>
            </view>
            <view class="queren_box" style="background-image: url('https://morgan.dingxians.cn/static/editpic/4.png');"
                @click="submit">
                确认充值
            </view>
        </template>
        <template v-else>
            <empty></empty>
        </template>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            banlanceList: [
            ],
            balanceId: 1,
            // #ifdef APP-PLUS
            czfsList: [
                {
                    id: 1,
                    text: '微信充值',
                    img: 'https://morgan.dingxians.cn/static/balance/5.png'
                },
                {
                    id: 2,
                    text: '支付宝充值',
                    img: 'https://morgan.dingxians.cn/static/balance/4.png'
                },
            ],
            zfType: 1,
            // #endif
            // #ifdef MP-WEIXIN
            czfsList: [
                {
                    id: 1,
                    text: '微信充值',
                    img: 'https://morgan.dingxians.cn/static/balance/5.png'
                },
            ],
            zfType: 1,
            // #endif
            // #ifdef MP-ALIPAY
            czfsList: [
                {
                    id: 3,
                    text: '支付宝充值',
                    img: 'https://morgan.dingxians.cn/static/balance/4.png'
                },
            ],
            zfType: 3,
            // #endif
            userInfo: {},
            selAmount: '',
        }
    },
    onLoad() {

    },
    onShow() {
        this.getrecharge()
        this.getInfo()
    },
    methods: {
        selBan(item) {
            this.balanceId = item.id
            this.selAmount = item.amount
        },
        zfBtn(item) {
            this.zfType = item.id
        },
        getrecharge() {
            this.$Request.get(this.$api.index.rechargePanels).then(res => {
                if (res.code == 200) {
                    this.banlanceList = res.data
                }
            })
        },
        getInfo() {
            this.$Request.get(this.$api.user.users).then(res => {
                if (res.code == 200) {
                    this.userInfo = res.data
                }
            })
        },
        submit() {
            // if (this.agreeSta) {
            let data = {
                type: this.zfType,
                id: this.balanceId,
                amount: this.selAmount,
                // #ifdef MP-WEIXIN
                market: 'wx',
                // #endif
                // #ifdef APP-PLUS
                market: '',
                // #endif
                // #ifdef MP-ALIPAY
                market: '',
                // #endif
            }
            this.$Request.post(this.$api.user.rechargeOrders, data).then(res => {
                var pay_data = res.data.data
                console.log(pay_data, '支付参数')
                if (this.zfType == 1) {
                    // #ifdef MP-WEIXIN
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: res.data.data.timeStamp,
                        nonceStr: res.data.data.nonceStr,
                        package: res.data.data.package,
                        signType: res.data.data.signType,
                        paySign: res.data.data.paySign,
                        success: (res) => {
                            console.log(res)
                            this.$msg('充值成功')
                            this.payStatus = false
                            setTimeout(() => {
                                this.getInfo()
                            }, 500)
                        },
                        fail: (err) => {
                            console.log(err)
                            this.payStatus = false
                        },
                    })
                    // #endif

                    // #ifdef APP-PLUS
                    uni.requestPayment({
                        provider: 'wxpay',
                        orderInfo: pay_data,
                        success: (res) => {
                            this.$msg('充值成功')
                            setTimeout(() => {
                                this.getInfo()
                            }, 500)
                        },
                        fail: (error) => {
                            console.log(error)
                        },
                    })
                    // #endif
                } else {
                    console.log(pay_data, '支付参数')
                    uni.requestPayment({
                        provider: 'alipay',
                        orderInfo: pay_data.trade_no,
                        success: (res) => {
                            this.$msg(res.msg)
                            this.getInfo()
                        },
                        fail: (error) => {
                            console.log(error)
                        },
                    })
                }

            })
            // } else {
            // 	this.$msg('请先同意用户协议')
            // }
        }
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 447rpx;
}

.qiaqnao_box {
    width: 694rpx;
    height: 231rpx;
    margin: auto;
    background-size: 100% 100%;
    position: relative;
    margin-bottom: 46rpx;
    margin-top: -231rpx;

    .yuebox {
        height: 49rpx;
        font-family: text1;
        font-weight: bold;
        font-size: 67rpx;
        color: #FFFFFF;
        line-height: 49rpx;
        font-style: italic;
        position: absolute;
        bottom: 29rpx;
        left: 40rpx;
    }

    .chakanxingqiang_box {
        position: absolute;
        width: 103rpx;
        height: 36rpx;
        background: #501414;
        border-radius: 18rpx;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20rpx;
        color: #FF4545;
        line-height: 36rpx;
        left: 242rpx;
        top: 98rpx;
    }
}

.yansuchongzhi_box {
    width: 100%;
    height: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 26rpx;
    padding-left: 31rpx;
    box-sizing: border-box;
    margin-bottom: 34rpx;
}

.chongliest_box {
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 30rpx;

    .dange_box {
        width: 220rpx;
        height: 134rpx;
        background: #1C0504;
        border-radius: 15rpx;
        box-sizing: border-box;
        padding-top: 26rpx;
        background-size: 100% 100%;
        flex-shrink: 0;
        margin-bottom: 23rpx;

        .top_box {
            width: 100%;
            height: 39rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15rpx;

            .le_box {
                width: 41rpx;
                height: 39rpx;
                margin-right: 8rpx;

                image {
                    width: 41rpx;
                    height: 39rpx;
                }
            }

            .shuzi_box {
                height: 39rpx;
                font-family: text1;
                font-weight: normal;
                font-size: 36rpx;
                color: #FFEDD7;
                line-height: 39rpx;
            }
        }

        .bot_box {
            width: 100%;
            height: 20rpx;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 22rpx;
            color: #FFEDD7;
            text-align: center;
            line-height: 20rpx;
        }
    }
}

.czfs_box {
    width: 100%;
    height: 134rpx;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 30rpx;
    margin-bottom: 105rpx;


    .dange_czsd_box {
        width: 234rpx;
        height: 134rpx;
        background: #1C0504;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 134rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        margin-right: 20rpx;
        background-size: 100% 100%;

        image {
            width: 40rpx;
            margin-right: 10rpx;
        }

    }
}

.queren_box {
    width: 529rpx;
    height: 120rpx;
    margin: auto;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
    background-size: 100% 100%;
}
</style>